<template>
    <div class="site f f-ac f-jc">
        <div class="site-body">
            <Sub-title label="订场馆" right-text="查看更多" padding="50px 0 10px" @right="handleMore" />
            <Type-btn :list="typeList" :current="current" key-value="id" top="30" row-gap="25" @click="handleType" />
            <div class="f f-ac f-jb site-box" v-if="Object.keys(siteInfo).length">
                <div class="site-left">
                    <div class="site-left-title line-1">{{ siteInfo.title || "-" }}</div>
                    <div class="site-left-content">{{ siteInfo.msg || "-" }}</div>
                    <div class="site-left-num">可预订：{{ siteInfo.site || 0 }}</div>
                    <div class="site-left-address line-1">
                        场馆地址：{{ siteInfo.address || "-" }}
                    </div>
                    <div class="btn f f-ac f-jc" @click="handleReservation">
                        预定
                    </div>
                    <!-- :class="{disabled: !siteInfo.num,}" -->
                </div>
                <div class="f-1 site-right">
                    <img :src="baseUrl+siteInfo.image" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        venueList,
        venueCategory
    } from "@/utils/order/index.js";
    export default {
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                current: "", //当前选中
                typeList: [{
                    id: '',
                    name: '最新'
                }, {
                    id: 'like',
                    name: '最热'
                }],
                siteInfo: {},
            };
        },

        mounted() {},
        created() {
            //   this.getTypeList();
            this.getList();
        },
        methods: {
            // 获取场馆列表
            getList() {
                this.loading = true;
                let that = this
                let data = {
                    venue_category_id: '',
                    title: '',
                    type: that.current,
                    page: 1,
                    limit: 1,
                    starttime: '',
                    type_time: '',
                    endtime: '',
                    city: '',
                    recommend: ''
                }
                console.log(that.current.length)
   
                venueList(data).then((response) => {
                    if (response.code == 200) {
                        that.siteInfo = response.data.list.length != 0 ? response.data.list[0] : {}
                        that.loading = false;
                    }

                });
            },
            // 获取场馆分类
            getTypeList() {
                this.loading = true;
                let that = this
                venueCategory().then((response) => {
                    that.typeList = response.data
                    that.loading = false;
                });
            },
            // 点击按钮
            handleType(i) {
                this.current = i.id;
                this.getList()
            },
            // 查看更多
            handleMore() {
                this.$router.push({
                    path: "/reservedSite",
                });
            },
            // 预定场馆
            handleReservation() {
                this.$router.push({
                    path: "/reservedSite/details",
                    query: {
                        id: this.siteInfo.id,
                    },
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .site {
        width: 100%;
        height: 725px;
        /* background-color: #fff; */

        &-body {
            width: 1200px;
            height: 100%;

            .site-box {
                height: 455px;

                .site-left {
                    width: 350px;
                    height: 100%;
                    background-color: #fff;
                    margin-right: 20px;
                    border-radius: 5px;
                    box-shadow: 0 0 10px 0 rgba(217, 217, 217, 0.4);
                    padding: 30px 20px 20px 20px;
                    box-sizing: border-box;
                    overflow: hidden;

                    &-title {
                        width: 100%;
                        font-size: 20px;
                        color: #313131;

                        &::after {
                            content: "";
                            display: block;
                            height: 1px;
                            width: 120px;
                            background-color: #313131;
                            margin-top: 10px;
                        }
                    }

                    &-content {
                        color: #909090;
                        max-height: 162px;
                        overflow: hidden;
                        font-size: 14px;
                        padding-top: 15px;
                        letter-spacing: 1px;
                    }

                    &-num {
                        color: #313131;
                        font-size: 14px;
                        margin-top: 33px;
                    }

                    &-address {
                        color: #909090;
                        font-size: 14px;
                        margin-top: 10px;
                    }

                    .btn {
                        user-select: none;
                        margin-top: 44px;
                        height: 64px;
                        border-radius: 5px;
                        color: #fff;
                        background-color: #193980;
                        font-size: 20px;

                        &:hover {
                            cursor: pointer;
                            background-color: #204697;
                        }

                        &:active {
                            background-color: #193980;
                        }
                    }

                    .disabled {
                        background-color: #d9d9d9;
                        pointer-events: none;
                        cursor: no-drop;

                        &:hover {
                            background-color: #d9d9d9;
                        }

                        &:active {
                            background-color: #d9d9d9;
                        }
                    }
                }

                .site-right {
                    height: 100%;

                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 5px;
                    }
                }
            }
        }
    }
</style>